

const path = require('path') //获取当前项目的路径
const webpack=require('webpack') //获取webpack 里的hot功能=> 页面热更新
const {CleanWebpackPlugin}=require('clean-webpack-plugin') //清除 dist目录插件  yarn add clean-webpack-plugin --dev
const HtmlWebpackPlugin=require('html-webpack-plugin') //自动生成html 插件   yarn add html-webpack-plugin --dev 
const CopyWebpackPlugin = require('copy-webpack-plugin')//自动copy文件  插件 yarn add copy-webpack-plugin --dev "copy-webpack-plugin": "^5.0.4",

class MyPlugin {  //移除打包之后的main.js的注释
  apply (compiler) {
    console.log('MyPlugin 启动')

    compiler.hooks.emit.tap('MyPlugin', compilation => {
      // compilation => 可以理解为此次打包的上下文
      for (const name in compilation.assets) {
        // console.log(name)
        // console.log(compilation.assets[name].source())
        if (name.endsWith('.js')) {
          const contents = compilation.assets[name].source()
          const withoutComments = contents.replace(/\/\*\*+\*\//g, '')
          compilation.assets[name] = {
            source: () => withoutComments,
            size: () => withoutComments.length
          }
        }
      }
    })
  }
}
module.exports = (env,argv)=>{
  const config={ 
      entry: './src/main.js', //文件入口
      // entry: './src/main.css', // 如果是css的话 就要下载 css-loader 插件
      output: {
        filename: 'main.js', //把文件定义的名字
        path: path.join(__dirname, 'dist'), // outputss文件 用当前项目的路径作为输出 
    //     publicPath:'dist/'//让图片加载从dist的目录开始
      },
      mode:'none', //production默认就是属于生产的打包   development 属于简易的原始代码  none属于不压缩
      devServer:{ //开发服务器代理
        contentBase:'./public',  //devServe 开发环境用的   CopyWebpackPlugin 生产环境用的
        hot:true,//实时更新编写的代码 并且不刷新页面的  但是用引用 require(webpack)
        proxy: {
          '/api': {
            // http://localhost:8080/api/users -> https://api.github.com/api/users
            target: 'https://api.github.com',
            // http://localhost:8080/api/users -> https://api.github.com/users
            pathRewrite: {
              '^/api': ''
            },
            // 不能使用 localhost:8080 作为请求 GitHub 的主机名
            changeOrigin: true
          }
        }
      },
      devtool:'source-map',//开发过程中的辅助工具 
      optimization:{// webpack 优化相
        // usedExports:true,  //打包的过程中去除为引用到的代码 优化性能
        
        // concatenateModules:true,// 把每个模块的代码放到一个函数里 减少模块

        // minimize:true //压缩代码
        // sideEffects:true //判断模块是否有负作用 如果一个模块没有用到 就不用打包了
      },
      module:{ //配置加载器
          rules:[
      
            {
              test:/\.js$/, //正则一定要写对
              use:{
                loader:'babel-loader',
                options:{
                  presets:[['@babel/preset-env',{modules:'commonjs'}]] //转换成es5的代码 yarn add babel-loader @babel/core @babel/preset-env --dev
                }
              }
            },
              {
                  test:/\.css$/,  //转换css文件
                  use:['style-loader','css-loader'] //这是从后往前执行的 首先执行css-loader转换   在执行style-loader 生成style放入页面中
              },
              {
                test:/\.png$/, //转换图片插件
                // use:['file-loader']
                use:{
                  loader:'url-loader',
                  options:{ //限制 10*1024的图片为bes64字符串  大了 就用file-loader 生成图片文件
                    limit:10*1024
                  }
                }
              },
              {
                test: /\.html$/,
                use: {
                  loader: 'html-loader', //转换html文件 
                  options: {
                    attrs: ['img:src', 'a:href']   //设置html文件可以用src 和 href
                  }
                }
              },
              {
                test:/\.md$/,
                loader:'./markdown-loader' //自己定义的markdown的加载器
              }
              
          ]
      },
      plugins:[  //配置插件
        // new CleanWebpackPlugin(), //自动清除 dist  开发环境没必要
        new HtmlWebpackPlugin({  //自动生成index.html 
          title: 'Webpack Plugin Sample',
          meta: {
            viewport: 'width=device-width'
          },
          template: './src/index.ejs' //生成的模板
        }),
        new HtmlWebpackPlugin({  //可以生成多个html文件
          filename: 'abouts.html'
        }),
        // new CopyWebpackPlugin([  开发环境没有必要 
        //   // 'public/**' 
        //   'public'
        // ])
        new webpack.HotModuleReplacementPlugin(), //实时热更新插件配置
        new webpack.DefinePlugin({
          API_BASE_URL:JSON.stringify('https://api.example.com') //想要得到的变量 保存到项目里  获取consle.log(API_BASE_URL)
        })
      ]
    }

    if(env=='production'){ //判断是否为生产环境还是开发环境 yran webpack --env production 是打包生产命令  yran webpack 是开发环境
      config.mode='production'
      config.devtool=false
      config.plugins=[...config.plugins,new CleanWebpackPlugin(),new CopyWebpackPlugin(['public'])]
    }

    return config
}






